<template>
  <div class="container">
    <van-nav-bar title="好价详情" left-arrow @click-left="onClickLeft" />
    <!-- <div class="desc_header">
      <van-sticky>
        <div>
          <span><van-icon name="arrow-left" /></span> 好价详情
        </div>
      </van-sticky>
    </div> -->
    <div class="good_desc">
      <div class="good_top">
        <div class="good_img">
          <!-- <van-search v-model="value" placeholder="手机" /> -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
              <img
                src="https://img1.baidu.com/it/u=3505249489,2837628265&fm=26&fmt=auto&gp=0.jpg"
                style="width: 2rem; height: 2rem"
              />
            </van-swipe-item>
             <van-swipe-item>
              <img
                src="https://img1.baidu.com/it/u=3505249489,2837628265&fm=26&fmt=auto&gp=0.jpg"
                style="width: 2rem; height: 2rem"
              />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="good_title">
          <h2>
            <span class="goodchose">精选</span>
            <span class="good_tit">EMXEE蛮细 孕妇睡衣套装</span>
          </h2>
          <p class="good_pri">
            <span class="g_pri">138元 <i>（包邮，双重优惠）</i></span>
            <span class="g_pri2">价格：<s> 218元</s></span>
          </p>
        </div>
        <div class="good_param">
          <p>
            购买渠道<span>京东</span><span>自营</span
            ><span class="comm">商品好评率97%</span>
          </p>
          <p>购买件数<span>1件</span></p>
          <p>实付金额<span>138元</span></p>
          <p class="g_order">
            订单截图<span>1张截图</span>
            <span class="g_sc">
              <img
                src="https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E6%88%AA%E5%9B%BE%E7%85%A7%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=2912572860,2847417965&os=3561190891,2936478462&simid=0,0&pn=6&rn=1&di=3740&ln=1457&fr=&fmq=1623067023858_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fpics0.baidu.com%2Ffeed%2F8b13632762d0f70306e67b4999977b3b2797c547.jpeg%3Ftoken%3D8198d71029e5a0514dd0145cf453d7d3%26s%3D5AC6A144D411AE7D12C448980300E0C8&rpstart=0&rpnum=0&adpicid=0&nojc=undefined"
                style="width: 0.25rem; height: 0.25rem" /><van-icon
                name="arrow"
            /></span>
          </p>
        </div>
        <div class="good_dec">
          <p>亲肤舒适，耐磨不起球</p>
          <p>
            京东该商品目前售价218元，参加满39元减10元活动，叠加页面领取的每满200元减30元优惠券，移动端商品
            价格下方红色小字多单有礼”点进去，满足条件可领满199元减40元券，到手价138元包邮，近期好价，感兴
            趣的值友不要错过~
          </p>
          <div class="g_li">
            <li>本文与16:37由“日光倾城Rachel”爆料</li>
            <li>
              完整 内容请到 <span class="worth">【什么值得买App】</span> 查看
            </li>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="low_pri">
        <p>设置降价提醒 <span>低于此价格通知你</span></p>
        <input type="text" id="pri"  v-model="count"/> <button @click="gz" :class="isActive.active">+关注</button>
        
        <div class="discount">
          <p>快捷输入</p>
          <ul>
            <li @click="handleClick($event)" >9折</li>
            <li @click="handleClick($event)" >8.5折</li>
            <li @click="handleClick($event)" >8折</li>
            <li @click="handleClick($event)" >7.5折</li>
          </ul>
        </div>
      </div>
      <div class="line"></div>

      <div class="other">
        <div class="o_title">
          <h2>618家居家装爆款低价</h2>
        </div>
        <ul>
          <li>
            <div class="buy">
              <img src="./dog.jpg" style="width: 1rem; height: 1rem" />
            </div>
            <div class="other_info">
              <p>DULUX多乐士A8146内墙漆15L可调色</p>
              <div class="other_pri">
                <div class="pri_1">
                  <p>￥39</p>
                  <p>京东</p>
                </div>
                <div class="pri_2">
                  <p>￥311.1</p>
                  <p>值得买活动价</p>
                </div>
                <img
                  src="../../assets/img/buy.png"
                  style="width: 0.5rem; height: 0.5rem"
                />
              </div>
            </div>
          </li>
       
        </ul>
        <div class="o_footer">
          <p>查看更多></p>
        </div>
      </div>
      <div class="line"></div>
      <div class="g_comm">
        <h1>热门评论</h1>
        <ul>
          <li>
            <div class="userImg">
              <img
                src="./dog.jpg"
                style="width: .4rem; height: .4rem;"
              />
            </div>
            <div class="u_comm">
              <p><span>你好</span><span class="u-time">10:44</span></p>
              <p class="pm">TOP1</p>
              <p>再来一次一元秒杀就好了哈哈哈</p>
            </div>
          </li>
        
        </ul>
        <div class="comm_all">
          <p>查看全部165条评论<i>></i></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, Icon, Sticky } from "vant";
import { Search } from "vant";

Vue.use(Search);
Vue.use(NavBar);
Vue.use(Icon);
Vue.use(Sticky);
// Vue.use(Search);

export default {
  data() {
    return {
      count:'',
      value: "",
      isActive:'active'
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
    handleClick(e){
      this.count=e.target.innerText;
    },
    gz(){

    }
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/desc.styl';
  .my-swipe .van-swipe-item {
    color #fff;
    font-size 20px;
    line-height 150px;
    text-align center;
  }
  .active{
    border-radius: 0.08rem;
    width: 0.85rem;
    height: 0.5rem;
    background-color: #EB362F;
    border: none;
    color: white;
  }
</style>